<template>
    <view>
        <block>
            <div class="diy-btn-wrap" :style="'justify-content: ' + componentData.data.flexType">
                <block v-if="wrap === 0">
                    <diy-navigator :url="componentData.data.url" @callback="callback">
                        <view
                            :style="
                                'color: ' +
                                componentData.data.color +
                                ';background-color: ' +
                                componentData.data.bgColor +
                                ';padding: ' +
                                componentData.data.paddingTopBottom * 2 +
                                'rpx ' +
                                componentData.data.paddingLeftRight * 2 +
                                'rpx;border-radius: ' +
                                componentData.data.borderRadius * 2 +
                                'rpx;font-size: ' +
                                componentData.data.fontSize * 2 +
                                'rpx;margin: ' +
                                componentData.data.marginTop * 2 +
                                'rpx ' +
                                componentData.data.marginRight * 2 +
                                'rpx ' +
                                componentData.data.marginBottom * 2 +
                                'rpx ' +
                                componentData.data.marginLeft * 2 +
                                'rpx;'
                            "
                            :class="'diy-btn ' + (wrap ? 'diy-wrap-btn' : '')"
                        >
                            {{ componentData.data.text || '按钮' }}
                        </view>
                    </diy-navigator>
                </block> 
                <block v-else>
                    <diy-navigator :url="componentData.data.url" @callback="callback">
                        <view
                            :style="
                                'color: ' +
                                componentData.data.color +
                                ';background-color: ' +
                                componentData.data.bgColor +
                                ';padding: ' +
                                componentData.data.paddingTopBottom * 2 +
                                'rpx ' +
                                componentData.data.paddingLeftRight * 2 +
                                'rpx;border-radius: ' +
                                componentData.data.borderRadius * 2 +
                                'rpx;font-size: ' +
                                componentData.data.fontSize * 2 +
                                'rpx;top:' +
                                componentData.data.top * 2 +
                                'rpx;left:' +
                                componentData.data.left * 2 +
                                'rpx;'
                            "
                            :class="'diy-btn ' + (wrap ? 'diy-wrap-btn' : '')"
                        >
                            {{ componentData.data.text || '按钮' }}
                        </view>
                    </diy-navigator>
                </block>
            </div>
        </block>
    </view>
</template>

<script>
import diyNavigator from '../diy-navigator/diy-navigator';
// plugin/components/diy-btn/diy-btn.js
export default {
    components: {
        diyNavigator
    },
    data() {
        return {};
    },
    /**
     * 组件的属性列表
     */
    props: {
        componentData: {
            type: Object,
			default:''
        },
        wrap: {
            type: Number,
            default: 0
        }
    },
    beforeMount() {},
    mounted() {
        // console.log('diy-btn', this.componentData);
    },
    /**
     * 组件的方法列表
     */
    methods: {
        callback(e) {
            const myEventDetail = { ...e.detail }; // console.log('diy-img-callback',e,myEventDetail);

            this.$emit('callback', {
                detail: myEventDetail
            });
        },

        toPath() {
			// console.log(123);
    //         if(this.componentData.data.url){
				// let url = '/' + this.componentData.data.url
			 //  uni.navigateTo({
			 //  	url
			 //  })
    //         }
        }
    }
};
</script>
<style>
@import './diy-btn.css';
</style>
